<template>
	<div>
		<div class="myform">
			<div class="center">
				<div>
					<img width="100%" src="/image/1448452809.jpg" alt="" />
				</div>
				
				<div style="display: flex;justify-content: space-between;">
					<div>
						<el-row class="tac" style="min-width: 300px;">
							<el-col :span="50">
								<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen"
									@close="handleClose" @select="get">
									<el-submenu index="1">
										<template slot="title">
											<i class="el-icon-location"></i>
											<span>导航一</span>
										</template>
										<el-menu-item index="1-1">选项1</el-menu-item>
										<el-menu-item index="1-2">选项2</el-menu-item>
										<el-menu-item index="1-3">选项3</el-menu-item>
										<el-submenu index="1-4">
											<template slot="title">选项4</template>
											<el-menu-item index="1-4-1">选项1</el-menu-item>
										</el-submenu>
									</el-submenu>
									<el-menu-item index="2">
										<i class="el-icon-menu"></i>
										<span slot="title">导航二</span>
									</el-menu-item>
									<el-menu-item index="3" disabled>
										<i class="el-icon-document"></i>
										<span slot="title">导航三</span>
									</el-menu-item>
									<el-menu-item index="4">
										<i class="el-icon-setting"></i>
										<span slot="title">导航四</span>
									</el-menu-item>
								</el-menu>
							</el-col>
						</el-row>
					</div>
					<div>
						<ul style="margin-top:10px;margin-left: 00px;">
							<li v-for="(item, index) in cakes" :key="index" style="margin-bottom:40px;cursor: pointer;">
								<router-link :to="`/main/cakexq?wid=${item.wid}`">
									<img width="200" :src="`/mp${item.image}`" alt="" />
								</router-link>
								<div style="font-weight: 800;margin-top:10px">{{ item.title }}</div>
								<div>
									<div style="margin-top:5px">{{ item.stitle }}</div>
									<div style="margin-top:5px">{{ item.price }}</div>
								</div>
								<button style="margin-top:5px">加入购物车</button>
							</li>
						</ul>
					</div>
				</div>
				<div style="text-align:center;font-size:13px;color:#543018">
					<span>首页</span>
					<span>上一页</span>
					<span>1</span>
					<span>下一页</span>
					<span>尾页</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				data: [],
				cakes: [],
			};
		},
		mounted() {
			this.getList();
			this.getCakes(10);
		},
		methods: {
			get(e) {
				console.log(e);
				this.getCakes(e)
			},
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			},
			getList() {
				// let url = "/mp/main_cakelist";
				// this.axios.get(url).then((res) => {
				//   console.log(res);
				//   this.data = res.data.data;
				// });
				this.data = [{
						fid: 1-1,
						title: "选项1"
					},
					{
						fid: 1-2,
						title: "选项2"
					},
					{
						fid: 1-3,
						title: "选项3"
					},
					{
						fid: 1-4,
						title: "选项4"
					},
					{
						fid: 5,
						title: "选项5"
					},
				]
			},
			getCakes(fid) {
				console.log("fid",fid);
				// let url = `/mp/main_cakes/${fid}`;
				if (fid == "1-1") {
					this.cakes = [{
							title: "IM",
							stitle: "im",
							price: "100"
						},
						{
							title: "Web",
							stitle: "web",
							price: "200"
						},
						{
							title: "Http",
							stitle: "http",
							price: "300"
						},
						{
							title: "WebSocket",
							stitle: "websocket",
							price: "400"
						},
						{
							title: "Chat",
							stitle: "chat",
							price: "500"
						},
					]
				} else if (fid == "1-2") {
					this.cakes = [{
							title: "IM2",
							stitle: "im",
							price: "100"
						},
						{
							title: "Web2",
							stitle: "web",
							price: "200"
						},
						{
							title: "Http2",
							stitle: "http",
							price: "300"
						},
						{
							title: "WebSocket2",
							stitle: "websocket",
							price: "400"
						},
						{
							title: "Chat2",
							stitle: "chat",
							price: "500"
						},
					]
				}
				// this.axios.get(url).then((res) => {
				// 	console.log(res);

				// });
			},
		},
	};
</script>

<style lang="scss" scoped>
	
	.el-menu-vertical-demo {
	  height: 100vh;
	  &:not(.el-menu--collapse) {
	    width: 180px;
	  }
	}
	.myform {
		margin-top: 40px;

		.center {
			// padding: 10px;
			// border: 1px solid blanchedalmond;
			// background-color: #f3f0ed;
			width: 50%;
			margin: auto;

			// div:last-child>span {
			// 	margin-right: 10px;
			// }

			// div:last-child>span:hover {
			// 	color: #a56224;
			// }

			// .cur {
			// 	color: #a56224;
			// }

			// ul:first-child {
			// 	li {
			// 		width: 5vw;
			// 		margin-left: 20px;
			// 		margin-top: 20px;
			// 		margin-right: 40px;
			// 		color: #543018;
			// 	}

			// 	li:hover {
			// 		color: #a56224;
			// 	}
			// }

			// ul:last-child {
			// 	li {
			// 		margin-left: 50px;
			// 		color: #543018;

			// 		button {
			// 			background-color: #543018;
			// 			color: white;
			// 			border-radius: 5px;
			// 			padding: 10px;
			// 			font-size: 13px;
			// 		}
			// 	}
			// }
		}
	}
</style>
